<template>
  <div class="app-container">
    <router-link :to="{name:'feedback-list',query:{feedbckId:this.$route.query.feedbackId }}">
      <el-button type="primary">返回</el-button>
    </router-link>
    <div class="info">
      <div>处理状态：{{feedbackInfo.status == 1?'未处理':'已处理'}}</div>
      
      <div>用户昵称：{{feedbackInfo.nickName}}</div>
      <div>联系方式：{{feedbackInfo.userPhone}}</div>
      <div>用户手机号：{{feedbackInfo.phone}}</div>
      <div>反馈时间：{{feedbackInfo.cTime }}</div>
      <div>反馈内容：{{feedbackInfo.context}}</div>
      <div>回执内容：{{feedbackInfo.receiptContext}}</div>
      <div>意见类型：{{feedbackInfo.malfunctionName }}</div>
      <div>
        图片：
        <img
          v-for="(item,index) in imgList"
          :key="index"
          :src="item"
          style="width:150px;max-height:150px;margin-right:20px;"
        >
      </div>
    </div>
    <!-- <router-link :to="{name:'feedback-list',query:{feedbackId:feedbackId}}" v-if="feedbackInfo.status==1"> -->
    <!-- <el-button @click="handle" type="primary" style="margin-left:100px;margin-top:50px;">处理</el-button>-->

    <el-button
      size="mini"
      type="primary"
      v-if="feedbackInfo.status==1"
      @click="editor"
      style="margin-top: 5px;"
    >处理</el-button>
    <!-- </router-link>     -->

    <!-- 驳回理由 弹框 -->
    <el-dialog title="回执内容" :visible.sync="dialog1.add">
      <el-form
        :model="addQuery"
        :rules="addRules"
        ref="addForm"
        label-position="right"
        label-width="120px" >
        <el-form-item label="回执内容" prop="receiptContext" > 
          <el-input clearable v-model="addQuery.receiptContext" placeholder="请输入回执内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button @click="loading.add = false">取消</el-button>
          <el-button type="primary" :loading="loading.add" @click="handle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryFeedbackDeatil, upFeedback } from "@/api/feedback";
export default {
  name: "feedback_detail",
  data() {
    return {
      feedbackInfo: {},
      feedbackId: this.$route.query.feedbackId,
      imgList: [],
      loading: {
        list: false,
        add: false
      },
      dialog1: {
        cash: false,
        add: false
      },
      bindext: {
        managerId: "",
        userName: "",
        userAcount: ""
      },
      addQuery: {
        receiptContext: ""
      },
      addRules: {
        receiptContext: [{ required: true, message: "回执理由不能为空", trigger: 'blur' }]
      },
    };
  },
  methods: {
    //获取意见详情
    async getDetail() {
      const { data } = await queryFeedbackDeatil({
        feedbackId: this.feedbackId
      });
      // console.log(data);
      this.imgList = data.feedbackUrl.split(",");
      this.feedbackInfo = data;
    },

    //点击处理按钮
    async handle() {
      
      this.$refs["addForm"].validate(async valid => {
        // console.log(valid)
        if (valid) {
          const { data } = await upFeedback({
            feedbackId: this.feedbackId,
            status: 2,
            receiptContext: this.addQuery.receiptContext
          });
        this.$router.go(-1)
          this.$message({
            type: "success",
            message: `编辑成功!`
          });
        }
      });
    },
    //编辑
    editor() {
      this.dialog1.add = true;
    }
  },
  created() {
    this.getDetail();
  }
};
</script>
<style lang="scss" scoped>
.info {
  margin-top: 30px;
  padding-left: 50px;
  color: #606266;
  div {
    line-height: 50px;
  }
}
</style>
